<template>
	<view class="container">
		<!-- 列表 -->
		<view class="list" v-if="list.length > 0">
			<u-radio-group placement="column" v-model="CheckAddrid">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="title">
						<text>收件人：{{item.consignee}}</text>
						<text>{{item.mobile}}</text>
					</view>

					<view class="info">
						{{item.region_text}} {{item.address}}
					</view>

					<view class="operate">
						<view class="default">
							<!-- 默认收货地址显示图标 -->
							<u-radio label="设置默认地址" :name="item.id" @change="check">
							</u-radio>
						</view>

						<view class="action">
							<navigator :url="'/pages/user/address/edit?addrid=' + item.id" class="edit">
								<u-icon name="edit-pen" top="-2" margin-left="10" color="#2979ff" size="15"
									labelSize="15" label="编辑"></u-icon>
							</navigator>

							<view class="del" @click="open(item.id)">
								<u-icon name="trash" top="-2" margin-left="10" color="#2979ff" size="15" labelSize="15"
									label="删除"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view v-else style="text-align: center;color: #CCCCCC;">暂无收货地，请先添加</view>

		<!-- 新增收货地址 -->
		<view class="btn">
			<navigator url="/pages/user/address/add" class="add">添加详细地址</navigator>
		</view>
		
		<!-- 模态框确认删除 -->
		<u-modal :show="showdel" showCancelButton :content='content' @confirm="confirm" ref="uModal" @cancel="showdel = false"></u-modal>
		
		<!-- 消息提示的组件 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				CheckAddrid: null,
				LoginUser: uni.getStorageSync('LoginUser'),
				showdel: false,
				id: null,
				content: '是否确认删除收货地址？'
			}
		},
		onLoad(){
			//验证是否有登陆
			this.$u.auth.check()
			this.AddressList();
		},
		methods:{
			// 获取地址列表
			async AddressList(){
				let result = await this.$u.api.user.AddressIndex({userid: this.LoginUser.id})
				if(result.code == '1'){
					this.list = result.data
					// 保存默认地址信息
					this.list.forEach((item) => {
						if(item.status == '1'){
							this.CheckAddrid = item.id
						}
					})
				} else {
					this.$refs.uToast.show({
						type:'error',
						message: result.msg
					})
					return false
				}
			},
		   async check(id){
				console.log(id)
				let data = {
					addrid: id,
					userid: this.LoginUser.id
				}
				let result = await this.$u.api.user.Addresscheck(data)
				if(result.code == '1'){
					this.AddressList();
					this.$refs.uToast.show({
						type:'success',
						message: result.msg
					})
					return false
				} else {
					this.$refs.uToast.show({
						type:'error',
						message: result.msg
					})
					return false
				}
			},
			async confirm(){
				console.log(this.id)
				this.showdel = false
				let data = {
					id: this.id,
					userid: this.LoginUser.id
				}
				let result = await this.$u.api.user.Addressdel(data)
				if(result.code == '1'){
					this.AddressList();
					this.$refs.uToast.show({
						type:'success',
						message: result.msg
					})
					return false
				} else {
					this.$refs.uToast.show({
						type:'error',
						message: result.msg
					})
					return false
				}
			},
			open(id){
				this.id = id
				this.showdel = true
			}
		}
	}
</script>


<style>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow-x: hidden;
	}

	.list {
		padding-bottom: 12vh;
	}

	/* 列表 */
	.list .item {
		background: #fff;
		/* margin-top:3vh; */
		padding: 3vh 3vh 1vh;
		font-size: 12px;
	}

	.item .title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2vh;
	}

	.item .info {
		color: #b9b9b9;
		border-bottom: 1px solid #e3e3e3;
		padding-bottom: 2vh;
	}

	.operate {
		padding: 2vh 0vh 1vh;
	}

	.operate,
	.action {
		display: flex;
		justify-content: space-between;
	}

	.action .edit {
		margin-right: 5vw;
	}


	/* 按钮 */
	.btn {
		position: fixed;
		bottom: 0px;
		width: 100%;
	}

	.add {
		width: 100%;
		height: 10vh;
		line-height: 10vh;
		text-align: center;
		font-size: 14px;
		color: #fff;
		background: #158dfb;
	}
</style>
